<template>
    <div>
      <div class="bannerimg" @click="handleShowGallary">
        <img :src="bannerImg" alt="">
        <div class="bannertext">
          <span class="name">{{this.sightName}}</span>
          <span class="number"><em class="iconfont">&#xe7fd;</em>{{this.gallaryImgs.length}}</span>
        </div>
      </div>
      <fadeAnimation>
        <gallary :imgs="gallaryImgs" @close="handleGallartClose" v-show='showGallary'></gallary>
      </fadeAnimation>
    </div>
</template>

<script>
import gallary from 'common/gallary/gallary'
import fadeAnimation from 'common/fade/fade'
export default {
  name: 'banner',
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  components: {
    gallary: gallary,
    fadeAnimation: fadeAnimation
  },
  data () {
    return {
      showGallary: false
    }
  },
  methods: {
    handleShowGallary () {
      this.showGallary = true
    },
    handleGallartClose () {
      this.showGallary = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/style/varible.styl"
.bannerimg
  position relative
  width 100%
  overflow hidden
  height 0
  padding-bottom 55%
  img
    display block
    width 100%
    height auto
    overflow hidden
  .bannertext
    display flex
    position absolute
    left 0
    right 0
    bottom 0
    height .6rem
    padding-left .1rem
    background-image linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8))
    font-size .24rem
    color $color-white
    .name
      flex 1
      font-size .24rem
      line-height .6rem
      text-align left
      color $color-white
    .number
      float left
      width .8rem
      font-size .24rem
      line-height .6rem
      text-align left
      color $color-white
</style>
